<template>
  <div class="list_label">
    <div :class="{labelColor:type_is_apartment === 1}" @click="changeLabelNewHouse(1)">公寓</div>
    <div :class="{labelColor:type_is_ocean === 1}" @click="changeLabelNewHouse(2)">洋房</div>
    <div :class="{labelColor:type_is_villa === 1}" @click="changeLabelNewHouse(3)">别墅</div>
    <div :class="{labelColor:type_is_shops === 1}" @click="changeLabelNewHouse(4)">商铺</div>
    <div :class="{labelColor:type_is_office === 1}" @click="changeLabelNewHouse(5)">写字楼</div>
    <div :class="{labelColor:type_is_hotel === 1}" @click="changeLabelNewHouse(6)">酒店</div>
    <div :class="{labelColor:type_is_housing === 1}" @click="changeLabelNewHouse(7)">住宅</div>
  </div>
</template>

<script>
  export default {
    name: 'ListLabel',
    data() {
      return {
        type_is_apartment: 0,//公寓
        type_is_ocean: 0,//洋房
        type_is_villa: 0,//别墅
        type_is_shops: 0,//商铺
        type_is_office: 0,//写字楼
        type_is_hotel: 0,//酒店
        type_is_housing: 0//住宅
      }
    },
    methods: {
      changeLabelNewHouse(id) {
        switch (id) {
          case 1:
            this.type_is_apartment = 1;
            break;
          case 2:
            this.type_is_ocean = 1;
            break;
          case 3:
            this.type_is_villa = 1;
            break;
          case 4:
            this.type_is_shops = 1;
            break;
          case 5:
            this.type_is_office = 1;
            break;
          case 6:
            this.type_is_hotel = 1;
            break;
          case 7:
            this.type_is_housing = 1;
            break;
        }
      }
    }
  }
</script>

<style scoped>
  .list_label {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    padding: 10px;
    border-bottom: 1px solid #eeeeee;
    border-top: 1px solid #eeeeee;
  }

  .list_label > div {
    padding: 5px;
    background-color: #f8f8f8;
    color: #a8a7a7;
  }
  .labelColor{
    color: #e6191e;
    border:1px solid #e6191e;
  }
</style>
